<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
		</view>
		
			<view v-show="current === 0">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listDataDone" :key="key" @click="getDetail(value)">
						<view class="uni-media-list">
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">{{value.proName}}</view>
								<view class="uni-media-list-text-bottom">
									<text>{{value.proContent}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 1">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listDataDoing" :key="key" @click="getDetail(value)">
						<view class="uni-media-list">
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">{{value.proName}}</view>
								<view class="uni-media-list-text-bottom">
									<text>{{value.proContent}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 2">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in listDataApply" :key="key" @click="getDetail(value)">
						<view class="uni-media-list">
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">{{value.proName}}</view>
								<view class="uni-media-list-text-bottom">
									<text>{{value.proContent}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
	
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import store from '../../store/index.js'
	var dateUtils = require('../../common/util.js').dateUtils;
	export default {
		components: {
			uniSegmentedControl,
			uniList,
			uniListItem,
			uniLoadMore,
			uniSwiperDot
		},
		data() {
			return {
				listDataDone: [],
				listDataDoing: [],
				listDataApply: [],
				items: [
					'已完成',
					'进行中',
					'申请中'
				],
				current: 1,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button'
			}
		},
		computed: mapState(['userName','userId']),
		onLoad() {
			this.getListDone();
			this.getListDoing();
			this.getListApply();
		},
		onPullDownRefresh() {
			this.getListDone();
			this.getListDoing();
			this.getListApply();
		},
		onReachBottom() {
			this.getListDone();
			this.getListDoing();
			this.getListApply();
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			getListDone() {
				var data = {
					column: "proName, proContent, userName, proCost, proResource, proTime, proState, proId, stateGoing"
				};
				uni.request({
					url: 'http://115.159.219.165:8080/project/userProjectList',
					data: {
						state: '已完成',
						userId: store.state.userId
						//userId: 10003
					},
					success: function(data) {
						if (data.statusCode == 200) {
							this.listDataDone = data.data.info.list;
							//console.log(data.data);
							console.log(this.listDataDone);
						}
					}.bind(this),
					fail: function(data, code) {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getListDoing() {
				var data = {
					column: "proName, proContent, userName, proCost, proResource, proTime, proState, proId, stateGoing"
				};
				uni.request({
					url: 'http://115.159.219.165:8080/project/userProjectList',
					data: {
						state: '进行中',
						userId: store.state.userId
						//userId: 10003
					},
					success: function(data) {
						if (data.statusCode == 200) {
							this.listDataDoing = data.data.info.list;
							//console.log(data.data);
							console.log(this.listDataDoing);
						}
					}.bind(this),
					fail: function(data, code) {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getListApply() {
				var data = {
					column: "proName, proContent, userName, proCost, proResource, proTime, proState, proId, stateGoing"
				};
				uni.request({
					url: 'http://115.159.219.165:8080/project/userProjectList',
					data: {
						state: '未进行',
						userId: store.state.userId
						//userId: 10003
					},
					success: function(data) {
						if (data.statusCode == 200) {
							this.listDataApply = data.data.info.list;
							//console.log(data.data);
							console.log(this.listDataApply);
						}
					}.bind(this),
					fail: function(data, code) {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getDetail: function(e) {
				let detail = {
					proName: e.proName,
					proContent: e.proContent,
					userName: e.userName,
					proCost: e.proCost,
					proResource: e.proResource,
					proTime: e.proTime,
					proState: e.proState,
					proId: e.proId,
					stateGoing: e.stateGoing
					
				}
				uni.navigateTo({
					url: "detail_project?detailDate=" + encodeURIComponent(JSON.stringify(
						detail))
				})
			},
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300upx;
		text-align: center;
	}

	.color-tag {
		width: 50upx;
		height: 50upx;
	}

	uni-radio-group uni-label {
		padding: 0;
	}

	.uni-list-item__container {
		padding: 24upx 30upx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-item__container:after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 30upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
</style>